<template>
  <div>
    <el-card class="m-t-15 box-card">
      <template #header>退出 + 数字、英文键盘 + 时间选择组件</template>

      <mes-title title="标题" lint="线体" />
      <div
        class="m-t-15 flex-center"
      >
        英文键盘使用
        <el-input

          v-model="value1"
          placeholder="1"
          class="w-300 m-l-15"
          @click.native="inputClick(1)"
        />
        <el-input v-model="value2" placeholder="2" class="w-300 m-l-15" @click.native="inputClick(2)" />
      </div>
    </el-card>

    <all-board
      v-if="allBoardConfig.visible"
      :default-value="allBoardConfig.value"
      :visible="allBoardConfig.visible"
      @select_key="selectKey"
    />
  </div>
</template>

<script>
import AllBoard from "@/components/MesAllBoard";
export default {
  name: "Mes",
  components: {
    AllBoard
  },
  data() {
    return {
      value1: "",
      value2: "",
      allBoardConfig: {
        // 初始化内容
        value: "",
        // 键盘是否显示
        visible: false,
        // 多个地方使用这个键盘时用来区分现在把内容放在哪一个上面
        flag: ""
      }
    };
  },
  methods: {

    inputClick(flag) {
      if (this.allBoardConfig.visible) {
        this.allBoardConfig.visible = false;
        this.$nextTick(() => {
          this.allBoardConfig.visible = true;
        });
      } else {
        this.allBoardConfig.visible = true;
      }
      this.allBoardConfig.flag = flag;
    },
    selectKey(codes, flag) {
      switch (this.allBoardConfig.flag) {
        case 1:
          this.value1 = codes;
          break;

        default:
          this.value2 = codes;
          break;
      }

      if (flag === "close") {
        this.allBoardConfig.visible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">

</style>
